.<template>
  <div>
    <personTop headline="我的关注"></personTop>
    <!-- 间隔用 -->
    <div class="interval"></div>
    <perAttentionBar
      v-for="(item,index) of attentionList"
      :data="attentionList[index]"
      @attrClick="cancelClick(item.id)"
      :key="index"
    ></perAttentionBar>
  </div>
</template>

<script>
import personTop from "../../components/personTop";
import PerBar from "../../components/PerBar";
import perAttentionBar from "../../components/perAttentionBar";
export default {
  data() {
    return {
      attentionList: []
    };
  },
  methods: {
    cancelClick(id) {
      this.$axios({
        url: "/user_unfollow/" + id,
        method: "get",
        headers: {
          Authorization: localStorage.getItem("token")
        }
      }).then(res => {
        this.$router.go(0);
      });
    }
  },
  components: {
    personTop,
    PerBar,
    perAttentionBar
  },
  mounted() {
    this.$axios({
      url: "/user_follows",
      method: "get",
      headers: {
        Authorization: localStorage.getItem("token")
      }
    }).then(res => {
      const { data } = res.data;
      this.attentionList = data || [];
    });
  }
};
</script>

<style lang="less" scoped>
.interval {
  padding: 4vw;
}
</style>